<template>
  <div>
    <h1>Card讲解的是默认插槽</h1>
    <Card>
      <template>
        <a href="http://www.baidu.com">百度</a>
      </template>
    </Card>
    <h1>Card1讲解的是具名操作</h1>
    <Card1>
      <template slot="huilan">
        <h1>第一个坑</h1>
      </template>
      <template #yalie>
        <span>填充第三个坑</span>
      </template>

      <template #haoge>
        <pre>填豪哥的坑</pre>
      </template>

      <template>
        <div :style="{color:color}" @click="add">我填充的是默认插槽</div>
      </template>
    </Card1>
  </div>
</template>

<script>
import Card from "./components/Card.vue";
import Card1 from "./components/Card1.vue";
export default {
  name: "",
  data() {
    return {
       color:'red'
    }
  },
  components: {
    Card,
    Card1,
  },
  methods: {
     add(){
       alert(123);
     }
  },
};
</script>

<style scoped>
</style>
